import React from 'react';
import './Recommend.css'
import { useHistory } from 'react-router-dom';
import { Toast } from 'antd-mobile';

const Recommend = (props)=>{
    const List = props.recommend
    const history = useHistory()
    function toDetail(e) {
        let id = e.id
        // console.log('点击了盒子，参数',e);
        Toast.show({
            icon:"loading",
            content: "加载中",
            duration:0
        })
        history.push(`/detail/${id}`)
    }
    // const List = [
    //     {
    //         "imgUrl":'https://gw.alicdn.com/bao/uploaded/i3/16226043066760398/T1Qy39FiJbXXXXXXXX_!!0-item_pic.jpg_320x320q90.jpg_.webp',
    //         "linkUrl":"",
    //         "thingDescript":"北欧简约床品件套 美式加大印花被套纯棉60支纱贡缎印花四件套",
    //         "price":279.5,
    //         "sold":20
    //     },
    //     {
    //         "imgUrl":'https://gw.alicdn.com/bao/uploaded/i1/2207104937688/O1CN01nSo96926f9dT0iJ5T_!!0-item_pic.jpg_320x320q90.jpg_.webp',
    //         "linkUrl":"",
    //         "thingDescript":"裕合联type-c转hdmi接头typec转vga转换器usb扩展器苹果电脑转转接头笔记本投影仪mac扩展坞接显示器投影投屏",
    //         "price":17.1,
    //         "sold":"100+"
    //     },
    //     {
    //         "imgUrl":'https://gw.alicdn.com/bao/uploaded/i1/2206879297771/O1CN01QAt60p27HAWw4m4tS_!!0-item_pic.jpg_320x320q90.jpg_.webp',
    //         "linkUrl":"",
    //         "thingDescript":"网红虎皮凤爪鸡脚小吃小零食卤味鸡爪子即食鸡肉熟食休闲食品整箱",
    //         "price":14.8,
    //         "sold":"3000+"
    //     },
    //     {
    //         "imgUrl":'https://gw.alicdn.com/bao/uploaded/i2/3253539558/O1CN01iHMFzN2KTcKcvtR6d_!!0-item_pic.jpg_320x320q90.jpg_.webp',
    //         "linkUrl":"",
    //         "thingDescript":"二阳猫耳朵网红解馋零食小吃休闲食品充饥夜宵好吃的猫耳酥年货节",
    //         "price":9.8,
    //         "sold":"2000+"
    //     },
    //     {
    //         "imgUrl":'https://gw.alicdn.com/bao/uploaded/i3/880734502/O1CN01ytEn3g1j7xp7q7bsg_!!0-item_pic.jpg_320x320q90.jpg_.webp',
    //         "linkUrl":"",
    //         "thingDescript":"【满400减290】三只松鼠小贱拉面丸子85g_休闲小零食干脆面网红",
    //         "price":15.2,
    //         "sold":"10000+"
    //     },
    //     {
    //         "imgUrl":'https://gw.alicdn.com/bao/uploaded/i4/2201475524202/O1CN01Ke5QnK1guYtKd5msK_!!0-item_pic.jpg_320x320q90.jpg_.webp',
    //         "linkUrl":"",
    //         "thingDescript":"紫米面包黑米奶酪夹心吐司蛋糕点学生早餐营养休闲小吃零食品整箱",
    //         "price":15.8,
    //         "sold":"71"
    //     },
    //     {
    //         "imgUrl":'https://gw.alicdn.com/bao/uploaded/i2/628189716/O1CN013U0H2y2LdyuUrmzRP-628189716.jpg_320x320q90.jpg_.webp',
    //         "linkUrl":"",
    //         "thingDescript":"百草味小萌蛋135g鹌鹑蛋卤蛋盐焗味休闲食品小包宿舍零食小吃夜宵",
    //         "price":19.9,
    //         "sold":"4000+"
    //     },
    //     {
    //         "imgUrl":'https://gw.alicdn.com/bao/uploaded/i1/880734502/O1CN01VaQseJ1j7xp3CzZ25_!!0-item_pic.jpg_320x320q90.jpg_.webp',
    //         "linkUrl":"",
    //         "thingDescript":"【三只松鼠_雪芙蕾蛋糕1kg】面包整箱早餐健康零食代餐糕点饱腹",
    //         "price":39.9,
    //         "sold":"10000+"
    //     },
    // ]
    return(
        <div className="recommend-container">
            {
                List.map((item,index)=>{
                    return(
                        <div className="recommend-item" key={index} onClick={()=>{toDetail(item)}}>
                            <a>
                                <img src={item.imgUrl} alt="" className="recommendItem-img" />
                            </a>
                            <a>
                               <div className="recommend-title">
                                   <span>{item.thingDescript}</span>
                               </div>
                               <div className="recommend-price-box">
                                   <span className='price-symble'>￥</span>
                                   <span className='recommend-price'>{item.price}</span>
                                   <span className="recommend-payed">{item.sold} 人已购买</span>
                               </div>
                            </a>
                        </div>
                    )
                })
            }
        </div>
    )

}

export default Recommend